<template>
  <view v-if="!isLoading" class="container" :style="appThemeStyle">
    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
      @up="upCallback">
      <!-- 头部及背景图 -->
      <view class="header" :style="{ backgroundImage: `url(${setting.pageBgImage})` }">
        <view v-if="isLogin" class="points-num">可用{{ pointsSetting.points_name }} {{ personal.points }}</view>
        <view class="fiexd-action" @click="handleRulesDesc()">
          <text>兑换规则</text>
        </view>
        <view class="header-filter"></view>
      </view>
      <!-- 导航栏 -->
      <view class="nav-bar">
        <view class="nav-list">
          <view class="nav-item" @click="$navTo('pages/points/log')">
            <view class="item-image">
              <image class="image" src="/static/points/mall/points_01.png"></image>
            </view>
            <view class="item-name">{{ pointsSetting.points_name }}明细</view>
          </view>
          <view class="nav-item--line"></view>
          <view class="nav-item" @click="$navTo('pages/signin/index')">
            <view class="item-image">
              <image class="image" src="/static/points/mall/points_02.png"></image>
            </view>
            <view class="item-name">每日签到</view>
          </view>
          <view class="nav-item--line"></view>
          <view class="nav-item" @click="$navTo('pages/order/index', { orderSource: OrderSourceEnum.POINTS_MALL.value })">
            <view class="item-image">
              <image class="image" src="/static/points/mall/points_03.png"></image>
            </view>
            <view class="item-name">我的兑换</view>
          </view>
        </view>
      </view>
      <!-- 商品分类 -->
      <u-tabs :list="categoryList" v-model="categoryKey" :is-scroll="true" :active-color="appTheme.mainBg" :duration="0.2"
        @change="onChangeTab" bg-color="transparent" />
      <!-- 积分范围 -->
      <view class="points-range">
        <u-tabs :list="rangeList" v-model="rangeKey" :is-scroll="true" :active-color="appTheme.mainBg" :duration="0.2"
          @change="onChangeTab2" bg-color="transparent" :show-bar="false" :item-style="rangeItemStyle" height="53.6" :bold="false" />
      </view>
      <!-- 商品列表 -->
      <view class="goods-list display-list column-2">
        <view class="goods-item display-card" v-for="(item, index) in goodsList.data" :key="index"
          @click="handleGoodsItem(item.pm_goods_id)">
          <view class="goods-image">
            <image class="image" mode="aspectFill" :src="item.goods_image"></image>
          </view>
          <view class="goods-info">
            <view class="goods-name oneline-hide row-2">{{ item.goods_name }}</view>
            <view class="goods-sales oneline-hide">
              <text class="sales">已兑换 {{ item.goods_sales }}</text>
            </view>
            <view class="footer">
              <view class="goods-price oneline-hide">
                <view class="points-icon">
                  <image class="image" src="/static/points/mall/points_01.png"></image>
                </view>
                <text class="value">{{ item.points_price_min }}</text>
                <template v-if="item.buy_type == GoodsBuyTypeEnum.POINTS_AND_MONEY.value">
                  <text class="plus">+</text>
                  <text class="value">{{ item.paid_price_min }}元</text>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <!-- 弹窗: 兑换规则 -->
    <u-modal v-model="showRulesDesc" title="兑换规则">
      <scroll-view class="rules-desc" :scroll-y="true">
        <text>{{ setting.rulesDesc }}</text>
      </scroll-view>
    </u-modal>
  </view>
</template>

<script>
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  import * as HomeApi from '@/api/points/mall/home'
  import * as PMGoodsApi from '@/api/points/mall/goods'
  import { OrderSourceEnum } from '@/common/enum/order'
  import { GoodsBuyTypeEnum } from '@/common/enum/points/mall'

  const pageSize = 15
  const rangeItemStyle = {
    padding: '0 20rpx',
    fontSize: '26rpx',
    color: '#333',
    backgroundColor: '#f1f1f1',
    marginRight: '15rpx',
    borderRadius: '10rpx',
    whiteSpace: 'nowrap'
  }

  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        // 枚举类
        OrderSourceEnum,
        GoodsBuyTypeEnum,
        // 是否加载中
        isLoading: true,
        // 当前用户是否登录
        isLogin: false,
        // 当前用户信息
        personal: {},
        // 积分商城设置
        setting: {},
        // 积分设置: 名称
        pointsSetting: {},
        // 弹窗: 兑换规则
        showRulesDesc: false,
        // 当前标签索引
        categoryKey: 0,
        // 商品分类列表
        categoryList: [],
        // 积分范围
        rangeList: [],
        // 当前选中的积分范围
        rangeKey: 0,
        // 积分范围: tabItem的样式
        rangeItemStyle,
        // 商品列表数据
        goodsList: getEmptyPaginateObj(),
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于4条才显示无更多数据
          noMoreSize: 4
        },
      }
    },
    computed: {
      categoryId() {
        return this.categoryKey > 0 ? this.categoryList[this.categoryKey].category_id : 0
      },
      rangeValues() {
        const rangeItem = this.rangeList[this.rangeKey]
        return this.rangeKey > 0 ? [rangeItem.start_value, rangeItem.end_value] : ''
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 加载页面数据
      this.getPageData()
    },

    methods: {

      // 加载页面数据
      async getPageData() {
        const app = this
        app.isLoading = true
        // 请求api获取页面数据
        const { data } = await HomeApi.data()
        app.isLogin = data.isLogin
        app.personal = data.personal
        app.setting = data.setting
        app.pointsSetting = data.pointsSetting
        app.categoryList = data.categoryList
        app.rangeList = data.rangeList
        // 初始化数据
        app.categoryList.unshift({ name: '全部' })
        app.rangeList.unshift({ name: '不限' })
        app.categoryKey = 0
        app.rangeKey = 0
        app.isLoading = false
        // 设置页面标题
        uni.setNavigationBarTitle({ title: app.setting.pageTitle })
      },

      // 显示兑换规则
      handleRulesDesc() {
        this.showRulesDesc = true
      },

      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      async upCallback(page) {
        try {
          // 设置列表数据
          const list = await this.getGoodsList(page.num)
          this.mescroll.endBySize(list.data.length, list.total)
        } catch (err) {
          this.mescroll.endErr()
        }
      },

      /**
       * 获取积分商品列表
       * @param {number} pageNo 页码
       */
      async getGoodsList(pageNo = 1) {
        const { categoryId, rangeValues, goodsList } = this
        const { data } = await PMGoodsApi.list({ page: pageNo, categoryId, rangeValues })
        this.goodsList.data = getMoreListData(data.list, goodsList, pageNo)
        return data.list
      },

      // 切换商品分类事件
      onChangeTab(index) {
        this.categoryKey = index
        this.onRefreshList()
      },

      // 切换积分范围事件
      onChangeTab2(index) {
        this.rangeKey = index
        this.onRefreshList()
      },

      // 跳转积分商品详情页
      handleGoodsItem(pmGoodsId) {
        this.$navTo(`pages/points/mall/goods/index`, { pmGoodsId })
      },

      // 刷新列表数据
      onRefreshList() {
        this.goodsList = getEmptyPaginateObj()
        setTimeout(() => this.mescroll.resetUpScroll(), 120)
      }

    },

    // 设置分享内容
    onShareAppMessage() {
      return {
        title: "积分商城",
        path: "/pages/points/mall/index?" + this.$getShareUrlParams()
      }
    },

    // 分享到朋友圈
    onShareTimeline() {
      return {
        title: "积分商城",
        path: "/pages/points/mall/index?" + this.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
  // 页面头部
  .header {
    position: relative;
    height: 390rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .points-num {
      color: #fff;
      position: absolute;
      top: 200rpx;
      left: 56rpx;
      font-size: 26rpx;
    }

    .fiexd-action {
      position: absolute;
      right: 0;
      top: 60rpx;
      width: 130rpx;
      height: 50rpx;
      background-color: rgba(0, 0, 0, .12);
      border-radius: 50rpx 0 0 50rpx;
      color: #fff;
      font-size: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 背景滤镜
    .header-filter {
      background: linear-gradient(0deg, #fafafa, hsla(0, 0%, 100%, 0));
      width: 100%;
      height: 150rpx;
      position: absolute;
      bottom: 0;
    }
  }

  // 积分规则
  .rules-desc {
    padding: 30rpx 48rpx;
    font-size: 26rpx;
    line-height: 50rpx;
    text-align: left;
    color: #606266;
    height: 520rpx;
    box-sizing: border-box;
  }

  // 导航区
  .nav-bar {
    position: relative;
    margin-top: -130rpx;
    // background: linear-gradient(0deg, #fafafa, hsla(0, 0%, 100%, 0));
    padding: 0 24rpx;
    margin-bottom: 20rpx;

    .nav-list {
      padding: 32rpx 0;
      background-color: #fff;
      margin: 0 auto;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 30rpx 0 rgba(0, 0, 0, 0.03);
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .nav-item {
      width: 210rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .item-image {
        margin: 0 auto;

        .image {
          display: block;
          width: 60rpx;
          height: 60rpx;
        }
      }

      .item-name {
        margin-top: 16rpx;
        font-size: 26rpx;
        color: #333;
        text-align: center;
      }

    }

    .nav-item--line {
      width: 1rpx;
      height: 72rpx;
      background-color: #f1f1f1;
    }
  }

  // 积分范围
  .points-range {
    margin: 14rpx 0 8rpx 0;
    padding: 0 20rpx;
  }

  // 商品列表
  .goods-list {
    padding: 24rpx;

    // 列表平铺
    &.display-list {
      display: flex;
      flex-wrap: wrap;
    }

    // 2列
    &.column-2 {
      .goods-item {
        flex-basis: 48.6%;

        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }

    .goods-item {

      // 2列
      &.column-2 {
        .goods-item {
          flex-basis: 48.6%;

          &:nth-child(2n) {
            margin-right: 0;
          }
        }
      }
    }

    // 商品内容
    .goods-item {
      flex-shrink: 0;
      background-color: #fff;
      flex: 0 1 48.6%;
      margin-right: 2.8%;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 20rpx;

      &.display-card {
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      }

      .goods-image {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;

        &:after {
          content: '';
          display: block;
          margin-top: 100%;
        }

        .image {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .goods-info {
        padding: 20rpx;

        .goods-name {
          font-size: 27rpx;
          color: #000;
          margin-bottom: 10rpx;
          // line-height: 1.3; // 用户端
        }

        .goods-selling {
          display: flex; // 解决文字超出无法隐藏
          font-size: 24rpx;
          margin-bottom: 8rpx;
          height: 38rpx;
        }

        .goods-sales {
          font-size: 24rpx;
          color: #959595;
          margin-bottom: 10rpx;

          .line {
            margin: 0 8rpx;
          }
        }
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods-price {
          position: relative;
          color: $main-bg;
          display: flex;
          justify-content: center;
          align-items: center;

          .points-icon {
            margin-right: 6rpx;

            .image {
              display: block;
              width: 30rpx;
              height: 30rpx;
            }
          }

          .value {
            font-size: 30rpx;
          }

          .plus {
            margin: 0 6rpx;
          }
        }
      }

    }
  }
</style>